<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="敬请期待"
      />
    </header>
    <div class="content">
      <img src="../../lib/img/ComingSoon/ComingSoon.png" alt="" class="img">
      <span class="txt">功能正在完善中，敬请期待呦~</span>
    </div>
  </div>
</template>

<script>
// 安装好vue的ui库后在这里引入模块, 使用vant ui库组件三部曲引入vue 引入组件 使用组件
import Vue from 'vue'
import { NavBar } from 'vant'
Vue.use(NavBar)
export default {
  // 设置data初始值
  data () {
    return {}
  },
  // 注册组件
  components: {},
  // 生命周期钩子函数
  mounted () {},
  // 计算属性
  methods: {}
}
</script>

<style lang="scss" scoped>
// 样式
  /deep/ .van-nav-bar {
    height: .5rem;
    line-height: 0.5rem;
    text-align: center;
    background-color: #FDD949;
    user-select: none;
    // 通知栏左侧箭头
    /deep/ .van-icon-arrow-left {
      color: black;
      font-size: .20rem;
    }
    // 通知栏标题
    /deep/ .van-nav-bar__title {
      font-size: .16rem;
    }
  }
  .content {
    position: relative;
    .img {
      width: 2.5rem;
      height: 2.5rem;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -1.25rem;
      margin-top: -2.5rem;
    }
    .txt {
      width: 3.0rem;
      text-align: center;
      font-size: .20rem;
      position: absolute;
      top: 60%;
      left: 50%;
      margin-left: -1.5rem;
    }
  }
</style>
